<template>
	<div class="array">
		<el-card :body-style="{ padding: '10px' }">
			<div slot="header">
				<span>1.数组的遍历方法</span>
			</div>
			<el-button type="primary">forEach</el-button>
			<el-button type="primary" @click="every">every</el-button>
			<el-button type="primary" @click="some">some</el-button>
			<el-button type="primary">for</el-button>
			<el-button type="primary" @click="map">map</el-button>
			<el-button type="primary" @click="filter">filter</el-button>
			<el-button type="primary" @click="find">find</el-button>
		</el-card>

		<el-card :body-style="{ padding: '10px' }">
			<div slot="header">
				<span>2.操作数组方法</span>
			</div>
			<el-button type="primary" @click="slice">slice</el-button>
			<el-button type="primary">splice</el-button>
			<div>
				<ul>
					<li v-for="(item, index) in arr" :key="index" @click="splice(index)">{{ item }}</li>
				</ul>
			</div>
		</el-card>

		<el-card>
			<div slot="header">改变数组的方法</div>
			<el-button type="primary" @click="test">测试</el-button>

			<el-button type="info" @click="change('push')">push</el-button>
			<el-button type="info" @click="change('pop')">pop</el-button>
			<el-button type="info" @click="change('unshift')">unshift</el-button>
			<el-card class="inner-card">
				<div slot="header">
					<span>方法的描述</span>
				</div>
				<transition
					enter-active-class="animated fadeInDown"
					leave-active-class="animated bounceOutRight"
					:duration="{ enter: 1000, leave: 500 }"
				>
					<span v-show="flag">13412354</span>

					<!-- <div style="color: #67C23A">{{ content}}</div> -->
				</transition>
				<!-- <div v-else>2</div> -->
				<!-- card body -->
			</el-card>
		</el-card>
		<!-- 全局指令的使用 -->
		<input type="text" v-focus v-bgc="{ color: '#ccc' }" />
	</div>
</template>

<script>
	import { bgc } from '@/directives'
	import { arrMap } from '@/utils/index'
	let arr = [1, 2, 4, 5]
	// let findA = ["c", "a", "d", "a", "g", "a"];
	export default {
		data() {
			return {
				content: '点击按钮后显示',
				key: 'value',
				arr: [1, 2, 3, 4, 5],
				flag: true,
				obj: [
					{ id: 1, name: 'oo', age: 18 },
					{ id: 2, name: 'ooo', age: 19 }
				]
			}
		},
		directives: {
			// focus,
			bgc
		},
		methods: {
			map() {
				// 格式化数组的方法
				//  let aaa = this.arr.map((val) => {
				//     return val * 2
				//   })
				//   console.log(this.arr);
				//   console.log(aaa);
				// 格式化对象的方法
				console.log(arrMap(this.obj))
			},
			filter() {
				let aa = this.arr.filter(e => e % 2 == 0)
				console.log(aa)
			},
			every() {
				let aa = this.arr.every(e => {
					console.log(e)
					return e < 10
				})
				console.log(aa)
			},
			some() {
				let aa = this.arr.some(e => {
					console.log(e)
					return e >= 5
				})
				console.log(aa)
			},
			find() {
				let aa = this.arr.find(e => {
					console.log(e)
					return e > 3
				})
				console.log(aa)
			},
			slice(e) {
				let aa = this.arr.slice(e, e + 1)
				console.log(aa)
			},
			splice(e) {
				this.arr.splice(e + 1, 0, 'oo')
			},
			test() {
				// 查找某个元素的所有下标的
				// let aArr = [];
				// findA.forEach((item,index) => {
				//   if (item == "a") {
				//     aArr.push(findA.indexOf(item,index) + 1);
				//   }
				// });
				// console.log(aArr);

				// 数组去重
				// repeat

				// toString() 方法
				let a = arr.toString('|')

				// valueOf
				// let a = arr.valueOf()
				console.log(a)
			},
			change(name) {
				switch (name) {
					case 'push':
						this.content = 'push方法'
						this.flag = true
						break
					case 'pop':
						this.content = 'pop方法'
						this.flag = false
						break
					default:
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.array {
		padding: 20px 0;
		.inner-card {
			margin-top: 10px;
		}
	}
	.el-card {
		margin: 10px;
	}
</style>
